<template>
  <div class="analysisData">
    <div class="topheader">
      <!-- <img src='/image/app/sixtitle.png' /> -->
      <p class="replaceImage">10年专注招商经验积累 成就行业口碑</p>
      <p>Focus on the field of investment promotion for 10 years, achieving the reputation of the industry</p>
    </div>
    <div class="container">
      <div class="itemWarp">
        <div class="item numberW">
          <div>
            <span class="number">10</span>年+
          </div>
          <div>核心高管团队招商经验</div>
        </div>
        <div class="item numberW">
          <div>
            <span class="number">10</span>亿+
          </div>
          <div>协助企业招商回款</div>
        </div>
        <div class="item numberW">
          <div>
            <span class="number">100</span>家+
          </div>
          <div>我们服务客户的数量</div>
        </div>
        <div class="item newStyle">
          <div class="leftbox">
            <div class='newOne'>纽交所</div>
            <div class='zhanwei'></div>
            <div class='newTwo'>新三板</div>
            <div class='newThree'>我们服务的客户</div>
          </div>
          <div class="rightbox">上市公司</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.newStyle{
  color: #ffffff;
  display: flex;
  flex-direction: row;
  .leftbox{
    align-items: center;
    display: flex;
    flex-direction: column;
  }
  .zhanwei{
    margin: 8px 0;
    width: 142px;
    height: 2px;
    background: #fff;
  }
  .newOne,.newTwo{
    font-size: 48px;
    font-weight: bold;
  }
  .newThree{
    font-size: 24px;
    margin-left: 28px;
  }
  .rightbox{
    margin-top: 6px;
    font-size: 24px;
    width: 24px;
  }
}
.analysisData {
  width: 100%;
  height: 100vh;
  min-width: 1366px;
  min-height: 625px;
  background: url("http://syg-photo.oss-cn-shanghai.aliyuncs.com/yingdin/photo/AnalysisDatabg.png-1593705195000")
    no-repeat;
  background-size: 100% 100%;
}
.topheader {
  padding-top: 8.64%;
  text-align: center;
  p {
    margin-top: 23px;
    font-size: 22px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }
  .replaceImage {
    height: 60px;
    font-size: 65px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    text-shadow: 0px 0px 0px rgba(17, 9, 5, 0.33);
  }
  img {
    width: 60%;
  }
}
.container {
  margin-top: 136px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.itemWarp {
  display: flex;
  align-items: flex-end;
}

.item {
  font-size: 43px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #ffffff;
  text-align: center;
  margin-right: 77px;
}

.numberW {
  div:last-of-type {
    font-size: 24px;
    margin-top: 0px;
  }

  div:first-of-type {
    font-size: 27px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #ffffff;

    span {
      font-family: Impact;
      font-size: 128px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #ffffff;
    }
  }
}
</style>
